<html>
	<head>
		<script src="desktop_notifier.js"></script>
		<title>Google DevFest Countdown Options</title>
		<link rel="stylesheet" href="options.css" />
	</head>

	<body onload="loadOptions();init_map();">
		<script src="analytics.js"></script>
		<script src="options.js"></script>
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
		<div id="header">
			<h1 class="left">Google DevFest Countdown Options</h1>
			<span class="right" id="feedback"><a href="https://chrome.google.com/extensions/detail/cpaokbabilmdndkckllokmijokbaoong/" target="_blank">Feedback</a></span>
		</div>
		<!--
		<div class="section-header first">Notification Options</div>
		<p>Remind you with dekstop notification every fifteen seconds?<p>
		<div>
			<input type="checkbox" id="checkboxEnableDesktopNotification" onmouseout="checkDesktopNotification();" onclick="enableDesktopNotification();">Show Desktop Notification</input>
		</div>
		-->
		<div class="section-header first">Venue Options</div>
		<p>Going to which Google DevFest event?<p>
		Select City:
		<select id="cityComboBox" onchange="update_map(); return markDirty();">
			<option value="saint_petersburg">St. Petersburg, Russia</option>
			<option value="mexico_city">Mexico City, Mexico</option>
			<option value="bangalore">Bangalore, India</option>
			<option value="hyderabad">Hyderabad, India</option>
			<option value="manila">Manila, Philippines</option>
			
			<option value="chiang_mai">Chiang Mai, Thailand</option>
			<option value="kuala_lumpur">Kuala Lumpur, Malaysia</option>
			<option value="singapore">Singapore, Singapore</option>
			<option value="jakarta">Jakarta, Indonesia</option>
			
			<option value="paris">Paris, France</option>
			<option value="barcelona">Barcelona, Spain</option>
		</select>
		<div id="map_canvas"></div>
		<div id="footer">
			<button class="rounded_buttton" id="buttonSave" style="font-weight:bold" onclick="saveOptions(); update_map(); trackButton(buttonSaveName);">Save</button>
			<button class="rounded_buttton" id="buttonCancel" onclick="loadOptions(); trackButton(buttonCancelName);">Cancel</button>
			<button class="rounded_buttton" id="buttonRestoreDefault" onclick="eraseOptions(); trackButton(buttonRestoreDefaultName);">Restore default</button>
		</div>

		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
		<script>
		var map;
		function init_map() {
			var latlng = new google.maps.LatLng(3.0455328234928123, 101.68960332870483);
			var venueMapOptions = {
			  zoom: 15,
			  center: latlng,
			  mapTypeId: google.maps.MapTypeId.HYBRID,
			  scaleControl: true,
			  mapTypeControlOptions: {
				style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
				position: google.maps.ControlPosition.TOP_LEFT
			  },
			  navigationControlOptions: {
				position: google.maps.ControlPosition.TOP_RIGHT
			  }
			};
			map = new google.maps.Map(document.getElementById("map_canvas"), venueMapOptions);
			update_map();
		}
		
		function update_map()
		{
			var select = document.getElementById("cityComboBox");
			var cityNameIndex = select.children[select.selectedIndex].value;
			localStorage["favCity"] = cityNameIndex;
			if(cityNameIndex == "saint_petersburg")
			{
				moveToSaintPetersburg();
			}
			else if(cityNameIndex == "mexico_city")
			{
				moveToMexicoCity();
			}
			else if(cityNameIndex == "bangalore")
			{
				moveToBangalore();
			}
			else if(cityNameIndex == "hyderabad")
			{
				moveToHyderabad();
			}
			else if(cityNameIndex == "manila")
			{
				moveToManila();
			}
			else if(cityNameIndex == "chiang_mai")
			{
				moveToChiangMai();
			}
			else if(cityNameIndex == "kuala_lumpur")
			{
				moveToKualaLumpur();
			}
			else if(cityNameIndex == "singapore")
			{
				moveToSingapore();
			}
			else if(cityNameIndex == "jakarta")
			{
				moveToJakarta();
			}
			else if(cityNameIndex == "paris")
			{
				moveToParis();
			}
			else if(cityNameIndex == "barcelona")
			{
				moveToBarcelona();
			}
			else
			{
				moveToKualaLumpur();
			}
		}

		function moveToSaintPetersburg() {
			var latlng = new google.maps.LatLng(59.93904168758779, 30.31578540802002);
			map.setCenter(latlng);
		}

		function moveToMexicoCity() {
			var latlng = new google.maps.LatLng(19.42705591358924, -99.12757873535156);
			map.setCenter(latlng);
		}

		function moveToBangalore() {
			var latlng = new google.maps.LatLng(12.971605607868163, 77.59456872940063);
			map.setCenter(latlng);
		}

		function moveToHyderabad() {
			var latlng = new google.maps.LatLng(17.385043724490032, 78.4866714477539);
			map.setCenter(latlng);
		}

		function moveToManila() {
			var latlng = new google.maps.LatLng(14.599510657898618, 120.98422408103943);
			map.setCenter(latlng);
		}

		function moveToChiangMai() {
			var latlng = new google.maps.LatLng(18.768656763281502, 98.96613121032715);
			map.setCenter(latlng);
		}

		function moveToKualaLumpur() {
			var latlng = new google.maps.LatLng(3.152171481778087, 101.68670654296875);
			map.setCenter(latlng);
		}

		function moveToSingapore() {
			var latlng = new google.maps.LatLng(1.2894328647643984, 103.84998321533203);
			map.setCenter(latlng);
		}

		function moveToJakarta() {
			var latlng = new google.maps.LatLng(-6.211551441519991, 106.8451738357544);
			map.setCenter(latlng);
		}

		function moveToParis() {
			var latlng = new google.maps.LatLng(48.85661169533619, 2.3522114753723145);
			map.setCenter(latlng);
		}

		function moveToBarcelona() {
			var latlng = new google.maps.LatLng(41.38791756889401, 2.169928550720215);
			map.setCenter(latlng);
		}

		</script>
		<div id="saveStatus">Options saved. Options will take effect automatically within fifteen seconds.</div>
	</body>
</html>